<template>
    <div>
        <el-dialog :title="flag?'批量下发指令':'下发指令'" :visible.sync="dialogVisible" width="450px" :before-close="closeDialog"
            :close-on-click-modal="false">
            <el-form :model="addForm" :rules="rules" ref="refForm" label-width="95px">
                <el-form-item size="small" label="服务标识" prop="serviceType">
                    <!-- 红外 -->
                    <el-select v-model="addForm.serviceType" filterable placeholder="请选择" style="width: 320px" v-if="deviceInfo.deviceType=='Infrared'">
                        <el-option v-for="(item, i) in serviceTypeList" :key="i" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <!-- 烟感 -->
                    <el-select v-model="addForm.serviceType" filterable placeholder="请选择" @change="serviceTypechange" style="width: 320px" v-else-if="deviceInfo.deviceType=='SmokeAlarm'">
                        <el-option v-for="(item, i) in serviceTypeList2" :key="i" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item size="small" label="服务值" prop="serviceValue">
                    <!-- 红外 -->
                    <el-select v-model="addForm.serviceValue" filterable placeholder="请选择" style="width: 320px" v-if="deviceInfo.deviceType=='Infrared'">
                        <el-option v-for="(item, i) in serviceValueList" :key="i" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                      <!-- 烟感 -->
                      <div v-else-if="deviceInfo.deviceType=='SmokeAlarm'">
                        <el-input maxlength="3" clearable v-model.trim="addForm.serviceValue" placeholder="请输入服务值(0-100)" oninput="if(isNaN(value)) { value = null } {if(value>100)value=100}" v-if="addForm.serviceType=='temperature_throshold'"></el-input>
                        <el-input maxlength="3" clearable v-model.trim="addForm.serviceValue" placeholder="请输入服务值(1-100)"  oninput="if(isNaN(value)) { value = null } {if(value==0)value=1} {if(value>100)value=100}" v-else-if="addForm.serviceType=='heartbeat_time'"></el-input>
                        <el-select v-model="addForm.serviceValue" filterable placeholder="请选择服务值" style="width: 320px" v-else>
                            <el-option v-for="(item, i) in serviceValueList2" :key="i" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" @click="submit" v-preventReClick="1000" class="confirm-button">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { reqCommand,reqBatchCommand } from "@api/api.js";
import { mapState } from "vuex";

export default {
    props: ['deviceInfo','idList'],
    data() {
        return {
            dialogVisible: false,
            serviceTypeList: [
                {
                    id:'work_mode',
                    name:'工作模式'
                }
            ],
            serviceTypeList2: [
                {
                    id:'muffling_cmd',
                    name:'消音下发'
                },{
                    id:'temperature_throshold',
                    name:'温度阈值设置'
                },{
                    id:'heartbeat_time',
                    name:'心跳周期设置'
                },{
                    id:'remote_tamper_state_cmd',
                    name:'防拆功能控制'
                },
            ],
            remote_tamper_state_cmdValue: [{
                id: 0,
                name: '关闭本地防拆声光报警',
            },{
                id: 1,
                name: '打开本地防拆声光报警',
            },{
                id: 2,
                name: '禁用防拆功能检测',
            }, ],
            serviceValueList: [
                {
                    id: 0,
                    name: "普通模式"
                }, {
                    id: 1,
                    name: "实时上报模式"
                }, {
                    id: 2,
                    name: "活动量统计模式"
                }, {
                    id: 3,
                    name: "建行模式"
                }, {
                    id: 4,
                    name: "三小场所模式"
                }, {
                    id: 5,
                    name: "老人独居模式"
                },
            ],
            serviceValueList2: [
                {
                    id:1,
                    name:'消音'
                }
            ],
            addForm: {
                serviceType: "",
                serviceValue: "",
            },
            rules: {
                serviceType: [
                    { required: true, message: "请选择服务标识", trigger: "change" },
                ],
                serviceValue: [{ required: true, message: "请选择服务值", trigger: "change" }],
            },
            flag:false,
        };
    },
    computed: {
        ...mapState(["user"]),
    },
    watch: {
        idList(val) {
            // console.log(val);
            this.flag=true;
        },
    },
    mounted() { },
    methods: {
        serviceTypechange(e){
            // console.log(e);
            this.addForm.serviceValue=""
            if(e=='temperature_throshold' || e=='heartbeat_time'){
                this.rules.serviceValue[0].message='请输入服务值'
            }else{
                this.rules.serviceValue[0].message='请选择服务值'
            }
            if(e=='remote_tamper_state_cmd'){
                // 防拆功能控制
                this.serviceValueList2=this.remote_tamper_state_cmdValue;
            }else if(e=='muffling_cmd'){
                // 消音下发
                    this.serviceValueList2=[
                    {
                        id:1,
                        name:'消音'
                    }
                ]
            }
        },  
        // 点击绑定
        submit(e) {
            // console.log(e);
            this.$refs.refForm.validate(async (valid) => {
                if (!valid) return;
                let { serviceType, serviceValue } = this.addForm;
                if(this.flag){
                    // 批量下发
                    const res = await reqBatchCommand({
                    serviceType,
                    serviceValue,
                    idList:this.idList
                });
                if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                this.$modal.notifySuccess("批量下发指令成功！");
                this.$parent.clearSelections();//清空复选框
                }else{
                    const res = await reqCommand({
                    serviceType,
                    serviceValue,
                    imei: this.deviceInfo.imei,
                    deviceId: this.deviceInfo.deviceId,
                });
                if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                this.$modal.notifySuccess("下发指令成功！");
                this.$parent.CommandPage();
                }
                this.closeDialog()
            });
        },
        // 点击关闭弹框
        closeDialog() {
            this.rules.serviceValue[0].message='请选择服务值'
            this.$refs.refForm.resetFields();
            this.dialogVisible = false;
            this.addForm= {
                serviceType: "",
                serviceValue: "",
            }
        },
    },
};
</script>
  
<style lang="less" scoped>
// 下拉框加载开始
.div_box {
    height: 276px;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    z-index: 2016;
    // background: red;
    // opacity: 0.5;
}

::v-deep .el-loading-mask {
    border-radius: 4px;
}

// 下拉框加载结束
</style>
  